<template>
    <div>
		<el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
			<el-form-item label="用户名" prop="username">
				<el-input v-model="form.username"></el-input>
			</el-form-item>
            <el-form-item label="邮箱" prop="email">
				<el-input v-model="form.email"></el-input>
			</el-form-item>
            <el-form-item label="用户密码" prop="password">
				<el-input type='password' v-model="form.password" show-password></el-input>
			</el-form-item>
            <el-form-item label="用户身份" prop="details">
                <el-select v-model="form.details" placeholder="请选择身份">
                    <el-option v-for="role in role_list" 
                        :key="role.id" 
                        :label="role.name+':'+role.detail" 
                        :value="role.name+':'+role.detail" 
                    />
                </el-select>
			</el-form-item>
            <!-- <el-form-item label="用户组别" prop="group">
				<el-input v-model="form.group"></el-input>
			</el-form-item> -->
            <el-form-item>
				<el-button type="primary" @click="saveEdit(formRef)" >添加</el-button>
				<el-button type="warning" @click="onReset(formRef)" >重 置</el-button>
			</el-form-item>
		</el-form>
    </div>
</template>
<script setup lang="ts">
import { ElMessage, FormInstance, FormRules, UploadProps } from 'element-plus';
import useUser from '../../hooks/User/useUser'
import { onMounted, ref } from 'vue';
import useUtils from '@/hooks/useUtils';

const { getRole } = useUser()
const role_list = ref([])

getRole().then( res => { 
        role_list.value=res.data;
    } 
)
const props = defineProps({
	data: {
		type: Object,
		required: true
	},
	edit: {
		type: Boolean,
		required: false
	},
	update: {
		type: Function,
		required: true
	}
});
const defaultData = {
	id: '',
	username: '',
    password: '',
    email: '',
    details: '',
    group: ''
}
const form = ref({ ...(props.edit ? props.data : defaultData) });
const rules: FormRules = {
	id: [{ required: true, message: '编号', trigger: 'blur' }],
	username: [{ required: true, message: '用户不能为空！', trigger: 'blur' }],
	password: [{ required: true, message: '用户密码不能为空！', trigger: 'blur' }],
	email: [{ required: true, message: '邮箱不能为空！', trigger: 'blur' }],
    details: [{ required: true, message: '用户身份不能为空！', trigger: 'blur' }],
    group: [{ required: true, message: '组别不能为空！', trigger: 'blur' }],
};

const formRef = ref<FormInstance>();
const saveEdit = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.validate(valid => {
		if (!valid) return false;
		props.update(form.value);
	});
};

const onReset = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    formEl.resetFields();
};

</script>

<style scoped>
.el-input-number {
	width: 200px;
}
.el-row {
	margin-bottom: 4px
}
</style>
